<template>
  <div class="home">
    <gltitle
      :is_mt="true"
      :is_notice="false"
      :is_back="true"
      :is_name="true"
      :title="title"
    ></gltitle>
    <div class="container">
      <div class="photo">
        <div class="pic rel" @change="changeImage($event)">
          <img :src="userData.avatar" alt="" />
          <div style="opacity: 0" class="file">
            <input
              class="file"
              type="file"
              accept="image/*"
              @change="handleAfterRead"
            />
          </div>
          <div class="abs">
            <img src="../../assets/images/ico_zxj.png" alt="" />
          </div>
        </div>
      </div>

      <div class="item">
        <div class="box">
          <div class="it">
            <div class="img flex1">
              <img src="../../assets/images/nickname.png" alt="" />
              <div class="l"></div>
              <span>{{ $t("page.昵称") }}</span>
            </div>
            <div class="str">
              <input
                type="text"
                :placeholder="userData.nickname"
                v-model="userData.nickname"
              />
            </div>
          </div>
          <div class="x100"></div>
          <div class="it">
            <div class="img flex1">
              <img src="../../assets/images/sex1.png" alt="" />
              <div class="l"></div>
              <span>{{ $t("page.性别") }}</span>
            </div>

            <div class="sex">
              <van-radio-group v-model="userData.gender" direction="horizontal">
                <van-radio name="0">
                  <template #icon="props">
                    {{ $t("page.男") }}
                    <img
                      class="img-icon"
                      :src="
                        props.checked
                          ? require('../../assets/images/ico_nan_on.png')
                          : require('../../assets/images/ico_nan_off.png')
                      "
                    />
                  </template>
                </van-radio>
                <van-radio name="1">
                  <template #icon="props">
                    {{ $t("page.女") }}
                    <img
                      class="img-icon"
                      :src="
                        props.checked
                          ? require('../../assets/images/ico_ru_on.png')
                          : require('../../assets/images/ico_ru_off.png')
                      "
                    />
                  </template>
                </van-radio>
              </van-radio-group>
            </div>
          </div>
          <div class="x100"></div>
          <div class="it">
            <div class="img flex1">
              <img src="../../assets/images/tg.png" alt="" />
              <div class="l"></div>
              <span>Telegram</span>
            </div>
            <div class="str">
              <input
                type="text"
                :placeholder="$t('page.请输入')"
                v-model="userData.telegram"
              />
            </div>
          </div>
          <div class="x100"></div>
          <div class="it">
            <div class="img flex1">
              <img src="../../assets/images/phone.png" alt="" />
              <div class="l"></div>
              <span>Whatsapp</span>
            </div>
            <div class="str">
              <input
                type="text"
                :placeholder="$t('page.请输入')"
                v-model="userData.whatsapp"
              />
            </div>
          </div>
        </div>
      </div>

      <div class="go">
        <button class="btn" @click="user_up">{{ $t("page.保存") }}</button>
      </div>
    </div>
  </div>
</template>
<script>
import { mapActions } from "vuex";
export default {
  data() {
    return {
      title: this.$t("page.个人信息"),
      avatar: "../../accets/images/err_photo.png",
      files: "",
      userData: {
        nickname: "",
        gender: "1",
        telegram: "",
        whatsapp: "",
      },
    };
  },

  mounted() {
    this.$post(this.URL.member.profile, {}).then((res) => {
      if (res.code == 0) {
        this.userData = res.data;
        this.userData.gender = res.data.gender + "";
      } else {
        this.$toast(res.message);
      }
    });

    this.Get_userData();
  },

  methods: {
    ...mapActions(["Get_userData"]),
    changeImage(e) {
      const file = e.target.files[0];
      const reader = new FileReader();
      const that = this;
      reader.readAsDataURL(file);

      reader.onload = function () {
        that.userData.avatar = this.result;
      };
    },

    async handleAfterRead(e) {
      // 文件上传至服务器
      const toast = this.$toast.loading({
        forbidClick: true,
      });
      const file = await this.common
        .compressor(e, {
          maxWidth: 700,
          maxHeight: 700,
        })
        .catch(() => {
          toast.clear();
        });

      this.$post(this.URL.user.upimg, file, {
        isUpload: true,
      })
        .then((res) => {
          if (res.code == 0) {
            this.userData.avatar = res.data.url;
            this.user_up();
          } else {
            this.$toast(res.message);
          }
          e.target.value = "";
        })
        .finally(() => {
          e.target.value = "";
          toast.clear();
        });
    },

    user_up() {
      this.$post(this.URL.member.infoUp, this.userData).then((res) => {
        if (res.code == 0) {
          this.Get_userData();
          this.$toast.success(res.message);
          //this.$toast(res.message);
          this.$store.dispatch("Get_userData");
          this.$router.push("/my/index");
        } else {
          this.$toast(res.message);
        }
      });
    },

    path_url(url, id) {
      if (id == 1 || id == 0) {
        return;
      }
      this.$router.push({
        path: url,
        query: {},
      });
    },
  },
};
</script>

<style lang="less" scoped>
/deep/ .head {
  background: transparent !important;
  height: 1.4rem;
  display: flex;
  align-items: center;
}

/deep/ .container {
  padding: 0 0.3rem;
}
.home {
  background: #0d2623 url("../../assets/images/myBg.png") no-repeat scroll;
  background-size: 100% 100vh;
  min-height: 100vh;
  padding-bottom: 60px;
}

.photo {
  padding: 2.55rem 0 1rem 0;
  .pic {
    width: 1.6rem;
    height: 1.6rem;
    margin: 0 auto;
    overflow: hidden;
    .file {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    img {
      height: 100%;
      width: 100%;
      border-radius: 50%;
      border: 0.04rem solid #fff;
    }
    .abs {
      right: 0;
      bottom: 0;
      img {
        width: 0.48rem;
        height: 0.48rem;
      }
    }
  }
}

.box {
  //padding: 0 0.28rem .28rem .28rem;
}
.item {
  margin-top: -1.2rem;
  padding-top: 1.2rem;
}

.van-radio-group {
  gap: 0.2rem;
  & > div {
    margin: 0 !important;
  }
}

.it {
  padding: 0.3rem;
  border-radius: 10px;
  align-items: center;
  background: url("../../assets/images/inputBg.png") no-repeat;
  background-size: 100% 100%;
  margin-bottom: 10px;
  display: flex;
  justify-content: start;

  .img {
    display: flex;
    align-items: center;
    img {
      width: 0.39rem;
      flex-shrink: 0;
    }
    .l {
      width: 0.03rem;
      height: 0.42rem;
      background-color: #126364;
      margin: 0 0.2rem;
    }
    span {
      color: #a4aaa8;
    }
  }
  .str,
  .more {
    font-size: 0.3rem;
    color: #fff;
  }
  input {
    color: #fff;
    font-size: 0.3rem;
    border: 0;
    background: none;
    text-align: right;
    &::placeholder {
      color: #666;
    }
  }
  .sex {
    height: 0.42rem;
    /deep/ .van-radio--horizontal {
      margin-left: 0.2rem;
      margin-right: 0;
    }
    /deep/ .van-radio__icon {
      font-size: 0.3rem;
      color: #929292;
      height: 0.42rem;
      img {
        height: 0.42rem;
        width: 0.42rem;
        max-width: 0.42rem;
        max-height: 0.42rem;
        vertical-align: middle;
      }
    }
    /deep/ .van-radio__icon--checked {
      color: #fff;
    }
  }
  .more {
    img {
      height: 0.26rem;
      margin-left: 0.16rem;
    }
  }
}
.go {
  margin-top: 0.3rem;
}

.btn {
  background: linear-gradient(90.25deg, #43ea80 0.21%, #38f8d4 99.79%);
  color: #0e4e35;
  border-radius: 0.2rem;
}
</style>
